<template>
	<div class="todo">	
		<!-- 传递函数给子组件，以便子组件调用传参 -->
		<todo-add :addItem="addItem"></todo-add>
		<!-- 传递items数据给子组件渲染 
		传递delItem函数给子组件调用-->
		<todo-list 
		:itemList="items" 
		:delItem="delItem"/>
	</div>
</template>
<script>
	//导入组件文件
	import TodoAdd from "./components/TodoAdd.vue"
	import TodoList from "./components/TodoList.vue"	
	export default {
		//局部注册组件
		components:{
			TodoAdd,TodoList
		},
		data(){
			return {
				//定义Todo项数据，参数为Todo项值
				items:["上课","吃饭","睡觉","打游戏","郊游"],
			}			
		},	
		methods:{
			//增加Todo项
			addItem(item){
				this.items.push(item);
			},
			//删除Todo项，参数为Todo项下标
			delItem(i){
				this.items.splice(i,1);
			}
		}
	}
</script>

<style>
</style>
